<template>
    <div >
        <el-scrollbar class="app-container-scroll-bar">
            <pageTitle :title="pageTitle" :hasBack="true" ></pageTitle>
            <card :data="cardData" icon-class="icon-cangku"></card>

            <!-- tab start-->
            <el-tabs style="margin:0 20px;" v-model="activeName" type="border-card">
                <el-tab-pane label="日志" name="first">
                    <el-button style="z-index:1000;position:absolute;right:20px;top:10px;" type="info" @click="handleReshLOG">
                        刷新
                    </el-button>
                    <pageLog
                        ref="pageLog"
                        :options="pageLogOptions"
                        ></pageLog>
                </el-tab-pane>

                <el-tab-pane label="应用实例" name="second">
                   
                  <shiliList ref="shiliList"  :options="shiliListOptions" ></shiliList>
                   
                </el-tab-pane>
                
                <el-tab-pane label="历史版本" name="three">

                    <historyList
                    	@refresh="refresh(true)"
                    	ref="historyList"
                    	 :id="id"></historyList>

                </el-tab-pane>

                <!-- <el-tab-pane label="历史事件" name="three">

                    <history-step :stepsList="stepsList"></history-step>

                </el-tab-pane> -->

              
            </el-tabs>
            <!-- tab end -->
        </el-scrollbar>
        
        
    </div>
</template>



<script>
import pageTitle from "@/view/layout/components/content/pageTitle";
import card from '@/view/components/card/detailCard.vue';
import historyStep from '@/view/components/step/historyStep.vue';
import shiliList from "./common/shiliList";
import historyList from "./rongqi/historyList";

import {tmpStatusFilter} from '@/filters/status/index';
import {deployTypeFilter} from '@/filters/status/index';

import {getTemplateById,getTemplateStatus} from'@/service/swagger/AcTemplateController'
import {getWorkUnitById} from'@/service/swagger/AcWorkInstController'

import {listenner} from "@/utils/statuslistener" ;

import {searchLogByTemplateIdPage} from'@/service/swagger/LogController'
import pageLog from '@/view/components/log/pageLog.vue';


export default{
    components:{
        card,
        pageTitle,
        historyStep,
        shiliList,
        pageLog,
        historyList,
    },
    data(){
        return{
            activeName:'first',
            id:this.$route.query.id,
            pageTitle:"容器详情",
            dialogVisible:false,
            cardData:null,
            pageData : {},
            cardConfig:{
                name:'名称',
                appType : "应用类型",
                appVersion:'当前版本',
                status:'状态',
                deployType:'部署类型',
                instCounts:"实例数",
                createTime:'创建日期',
                repositoryType:"仓库类型",
            },
            stepsList:[],
            shiliListOptions:{
            	params : {
            		// templateType: 1,
                    templateId : this.$route.query.id ,
                    pageSize:10,
                    pageNum:1
            	}
            },
            pageLogOptions:{
            	autoGetData : true ,
            	serviceFN : searchLogByTemplateIdPage,
            	params : {
            		id : this.$route.query.id ,
            	}
            }
        }
    },
    mounted() {
      this.initPage();
      this.getHistory();
      this.$refs.historyList.init(this.id)
    },
    methods:{
        handleCommand(){
            
        },
        refresh(b){
        	if(b){
        		this.id=this.$route.query.id;
        		this.initPage();
        		this.getHistory();
        		this.handleReshLOG();
        		this.$refs.shiliList.refresh(this.id)
        		this.$refs.historyList.init(this.id)
        	}
        },
        
        initPage(){
        	if(!this.id){
        		return ;
        	}
          getTemplateById(this.id).then(ret=>{
              if(!ret.code&&ret.data){
              	this.pageData = ret.data ;
              	this.initCardData();
              	this.addStatusListenner();
              }
          })
          
          //
        },
        
        initCardData(){
            let data = {};
            for(let i in this.pageData){
                const _name = this.cardConfig[i]
                if(_name){
                    if(i=='status'){
                        data[_name] = {
                            html : tmpStatusFilter(this.pageData[i])
                        };
                    }else if(i=='deployType'){
                        data[_name] = {
                            html : deployTypeFilter(this.pageData[i],this.pageData.templateType)
                        };
                    }else{
                        data[_name] = this.pageData[i];
                    }
                }
            }
            this.cardData = data;
        },
				
        addStatusListenner(){
            const statusStatic = (status)=>{
                // 是否是稳定状态
                const isStatic =  !(tmpStatusFilter(status).indexOf("...")>-1);
                return isStatic ;
            }
            if(!statusStatic(this.pageData.status)){
                listenner({
                    api : {
                        serviceFN : getTemplateStatus ,
                        params : [
                            this.id ,
                        ],
                    },
                    callBack: (ret)=>{
                        this.pageData.status = ret.data[0].status;
                        this.initCardData();
                        const status = statusStatic(this.pageData.status)
                        this.$refs.pageLog.setStatusStatic(status)
                        return status;
                    },
                },this)
            }
        },

        // 获取历史事件
        getHistory(){
            getWorkUnitById({id:this.id}).then(ret=>{
                if(ret&&ret.code == 0){
                    console.log(ret)
                   this.stepsList =  ret.data.map(el=>{
                       return{
                           id:el.instId,
                           desc:el.workName,
                           title:el.createTime
                       }
                   })
                }
            })
        },
        //刷新日志
        handleReshLOG(){
            this.$refs.pageLog.initPage()
            this.$refs.pageLog.initData({
            	id : this.id
            })
        }
    }


}
</script>


<style scope>

</style>
